<template>
  <div class="hello">
    <App></App>
    <x-header>我的题库<a slot="right" @click="toAddQuestion">添加题目</a></x-header>

    <!--搜索区域-->
    <search
      position="absolute"
      :auto-fixed="autoFixed"
      auto-scroll-to-top
      top="46px"
      v-model="searchKey"
      @on-submit="onSubmit"></search>

    <loading :show="loading" text=""></loading>

    <!--列表-->
    <panel></panel>

    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__bd">
        <div class="weui-media-box weui-media-box_small-appmsg">
          <div class="weui-cells" v-infinite-scroll="getQuestionList" style="padding-bottom:10px;"
               infinite-scroll-disabled="loadingDisabled"
               infinite-scroll-distance="10" >
            <a v-for="question in questionList" @click="toInfo(question.id)" class="weui-cell weui-cell_access">
              <div class="weui-cell__bd"><p>{{ question.name }}</p></div>
              <span class="weui-cell__ft"></span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- 分类 弹出选择框-->
    <div v-transfer-dom>
      <popup v-model="catalogIsShow">
        <popup-header
          left-text="取消" right-text="确定" title="请选择"
          @on-click-left="catalogIsShow = false"
          @on-click-right="catalogIsShow = false"></popup-header>
        <group gutter="0">
          <radio :options="catalogOptions" :value="catalogChecked"></radio>
        </group>
      </popup>
    </div>

  </div>
</template>
<script>
import App from '../../App'
import { Tabbar, TabbarItem, Group, Cell, XHeader, Search, PopupHeader, Popup, TransferDom, Radio, Panel, ToastPlugin, Loading } from 'vux'

import VueRouter from '../../router/routes.js'
import Vue from 'vue'

import { InfiniteScroll } from 'mint-ui'
Vue.use(InfiniteScroll)

Vue.use(ToastPlugin)
// import Vue from 'vue'

// Vue.use(myTabbar)

export default {
  name: 'QuestionCenter',
  directives: {
    TransferDom
  },
  components: {
    App,
    XHeader,
    Search,
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    PopupHeader,
    Popup,
    TransferDom,
    Radio,
    Panel,
    Loading
  },
  data () {
    return {
      loading: false,
      loadingDisabled: false,
      page: 1,
      pageSize: 20,
      // 底部弹框
      sortIsShow: false,
      catalogIsShow: false,
      sortOptions: [{key: 1, value: '默认排序'}, {key: 2, value: '调用量'}],
      sortChecked: 1,
      catalogOptions: [{key: 1, value: '全部'}, {key: 2, value: '水利'}, {key: 3, value: '电力'}, {key: 4, value: '住建'}, {key: 5, value: '桥梁'}],
      catalogChecked: 1,
      questionList: [],
      autoFixed: false,
      searchKey: ''
    }
  },
  mounted: function () {
    // this.getQuestionList()
  },
  methods: {
    // 搜索
    onSubmit () {
      this.page = 1
      this.questionList = []
      this.getQuestionList()
    },
    // 显示排序
    showSort () {
      this.sortIsShow = true
    },
    // 显示分类
    showCatalog () {
      this.catalogIsShow = true
    },
    // 前往添加题目
    toAddQuestion () {
      VueRouter.push({
        path: '/questionAdd'
      })
    },
    // 获取题目列表
    getQuestionList () {
      this.loading = true
      var _this2 = this
      this.$axios.get('/bz/bzQuestion/page', {pageNo: _this2.page, pageSize: _this2.pageSize, name: _this2.searchKey})
        .then(function (response) {
          if (response.data.data.results) {
            var list = response.data.data.results
            if (list.length === 0) {
              _this2.$vux.toast.text('已经加载全部啦')
              _this2.loading = false
              _this2.loadingDisabled = true
            } else {
              for (var i = 0; i < list.length; i++) {
                _this2.questionList.push(list[i])
              }
              /* 单次请求数据完毕 */
              _this2.page++
              _this2.loading = false
            }
          } else {
            _this2.$vux.toast.text('没有成功获取到问题数据')
            _this2.loading = false
            _this2.loadingDisabled = true
            /* 所有数据加载完毕 */
            return null
          }
        })
    },
    // 前往详情
    toInfo (id) {
      VueRouter.push({
        path: '/questionDetail', query: {id: id}
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

